*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{
    background-color: #1a2032;
    
}

.navbar,.sidebar,.footer{
    display: flex;
    justify-content: center;
    
    
    border:0.2vw solid black;
}

.main-content{
    display:flex;
    border:0.2vw solid black;
}

.sidebar,.footer{
    align-items: center;
    text-align: center;
}

.container{
    
    display: grid;
    grid-template-columns: 17vw 83vw;
    grid-template-rows:12vh 90vh 9vh;
    grid-auto-rows:30vh;
    grid-template-areas:
    "navbar navbar"
    "sidebar main-content"
    "footer footer"
    ;
}
/*Navbar Section*/

.navbar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin:auto;
    list-style-type:none;
    background-color: rgb(157, 115, 150);
    grid-area:navbar;
    height:15vh;
    width:100vw;
    
}

/*Nav (Left Side)*/

.logo-container{
    display: flex;
    flex-direction: row;
    gap:1vh;
}

.logo{
    
    margin-left:1.3vh;
    margin-bottom: 1.5vh;
}
.logo-text{
    font-size:2.3vw;
    font-weight:bold;
    
    margin-top:1.2vh;
}



/*Nav (Right Side)*/

.logo-2-container{
    display: flex;
    flex-direction: row;
    gap:2vw;
    width:20vw;
   float:right;

}


.nav-img{
    height:9vh;
    width:4vw;
}

.vibe-hq-btn{

    width:10vw;
    height:8vh;
    background-color: #666e88;
    font-weight:bold;
    color:rgb(0, 0, 0);
    border-radius:1vw;
    justify-content: center;
    font-size:1vw;
        border:.25vw solid black;
        margin-top:.5vh;
}

#profile-img{
    margin-bottom:2.2vh;
    width:4.3vw;
}

/*Navbar Section End*/



/*Body Section*/




/*Sidebar*/
.sidebar{
    background-color: rgb(203, 158, 203);
    grid-area:sidebar;
    display: flex;
    flex-direction: column;
    
    justify-content: space-evenly;
}

.sidebar-img{
    height:7vh;
    width:5vw;
    
    align-items:center;
    text-align:center;
    
}

.dashboard-img{
    height: 5.3vh;
    width:5vw;
}

.calendar-img{
    height:6vh;
    width:6vw;
    margin-left:-.8vw;
}
.tasks-img{
    margin-left:-1vw;
}
.rooms-img{
    height:6vh;
    width:6vw;
}

.settings-img{
    
    height:6.5vh;
    width:6.5vw;
    float:left;
    margin-right:2vw;
}
.sidebar-link{
    display: flex;
    flex-direction: row;
    
    text-decoration-line: none;
    color:black;
    font-size:2.2vw;
    font-weight:bold;
    background-color: rgb(98, 156, 137);
    padding:0.4vw;
    border-radius:.6vw;
    border:0.2vw solid black;
    justify-content: center;
    align-items: center;
    height:10vh;
    width:15vw;
    
    
    
}



#library-icon{
    margin-left:-.2vw;
}

.dashboard-link{
    gap:.5vw;
}

.calendar-link{
    gap:.4vw;
}
.tasks-link{
    font-size:2vw;
    display: flex;
    justify-content: space-around;;
}

#library-link{
    font-size:1.9vw;
    display: flex;
    justify-content: space-evenly;
    gap:0.4vw;
    white-space: nowrap;
}


.dashboard-text{
     margin-left:0.1vw;
}
.tasks-text{
    margin-left:-1vw;
}

#library-text{
    margin-right:1vw;
}

.rooms-link{
    font-size:1.8vw;
    white-space:nowrap;
    
}

#settings-link{
    font-size:2vw;
    white-space:nowrap;
    display: flex;
    justify-content:left;
    gap:1.3vw;
    
}

#settings-text{
    display: flex;
    float:left;
    justify-content: center;
    margin-right:1.2vw;
}


/*Sidebar Ends*/

/*Main Content Section*/

.main-content{
    background-color:#1b1e2f;
  
    display: flex;
    flex-direction: column;
   align-items: center;
   text-align: center;
}



.settings-header{
display: flex;
flex-direction: row;

justify-content: space-between;
border:0.2vw solid white;
overflow:hidden;
width:96%;
white-space:nowrap;
margin-top:2vh;
height:8vh;
border-radius:0.4vw 0.4vw 0 0;

}

.settings-container{
    
    
    display: flex;
    flex-direction: column;
  align-items: center;
    border:0.2vw solid white;
   border-radius:0.2vw 0.2vw 0 0;
    width:96%;
    height: 90%;
    
}
.row-container{
    display: flex;
  justify-content:center;
    align-items: center;
    text-align: center;
   
    width:100%;
    height:100%;
}


.settings-header-item{
    font-weight:bold;
    
    color:white;
    font-size:2vw;

width:20vw;
height:5vh;

}

.settings-header-item:hover{
    background-color: rgb(157, 115, 150);
    color:white;
    font-weight:bold;
    font-size:2vw;
    cursor:pointer;
}
.input-container{
    display: flex;
    flex-direction: row;
justify-content: center;
    text-align: center;
    align-items: center;
   margin-top:2vh;
   margin-bottom:2vh;

    height:9vh;
    width:96%;;
}

.form-input-labels{
  

    color:rgb(255, 248, 248);
    font-weight:600;
    font-size:1.3vw;
 
    margin:auto;
  
    justify-content: center;
    text-align: center;
    align-items:center;
    display:flex;
    
}

.form-input{
    height:auto;
    width:13vw;
    height:4vh;
    display:flex;
  
    margin:auto;
    border:0.05vw solid black;
    border-radius:0.2vw;
    background-color: rgba(255,255,255,0.5);
}

.form-input:focus{
    outline:none;
    border:0.2vw solid rgb(157, 115, 150);
    background-color: rgba(255,255,255,0.8);
}

.form-input::placeholder{
    padding-left:0.5vw;
    color:white;
}






.tasks-btn-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    
}


.add-task-btn{
 
    border-radius:0.5vw;
    width:6vw; 
    font-weight:bold;
    font-size:1vw;
    height:5vh;
    border:.3vw solid black;
    background-color: #666e88;
    cursor:pointer;
    
    
}

.row-container-2{
  
    width:90%;
   
    display:flex;
    flex-direction:row;
    justify-content: space-evenly;
text-align:center;
align-items:center;
margin:auto;
}

.add-task-btn-2{
 
    border-radius:0.5vw;
    width:10vw; 
    font-weight:bold;
    font-size:1vw;
    height:7vh;
 
    border:.3vw solid black;
    background-color: #3c4976;
    cursor:pointer;
    
    
}

#row-container-3{
   
    width:90%;
   height:9.5vh;
    display:flex;
    flex-direction:row;
    justify-content: space-evenly;
text-align:center;
align-items:center;
margin:auto;
}

.skills-btn-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    justify-content: space-evenly;

    margin-bottom:2vh;
    margin-top:2vh;
}

.social-media-container{
    display:flex;
    flex-direction:row;
}

#social-media-header{
    font-weight:bold;
    font-size:2vw;
    color:white;
}

#social-media-list{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    list-style-type:none;
    gap:1vw;
}

.social-media-item{
    
    background-color: white;  
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; 
    height:6vh;
    width:11vw;
    white-space:nowrap;
    font-weight:bold;
    font-size:1vw;
    border-radius:1.3vh;
    
    border:0.2vw solid black;
}

#google-item{
    background-color: whitesmoke;
    
}
#apple-item{
    background-color: antiquewhite;
}
#facebook-item{
    background-color: #1870e2;
}

#notifications-label{
    color:white;
    font-size:1.5vw;
    font-weight:bold;
}

#notifications-btn{
     font-size:1vw;
    height:2.5vw;
    width:20vh;
    font-weight:bold;
    background-color: rgb(169, 167, 67);
    border-radius:1vw;

}
#theme-label{
    font-size:8vw;
     color:white;
    font-size:1.5vw;
    font-weight:bold;
}



#theme-change-btn{
    font-size:1vw;
    height:2.5vw;
    width:20vh;
    font-weight:bold;
    background-color: rgb(169, 167, 67);
    border-radius:1vw;
}


.cancel-btn{

    color:rgb(13, 13, 13);
    font-weight:bold;
    font-size:1vw;
    cursor:pointer;
    margin-right:2vw;
    border-radius: 1vw;
        background:linear-gradient(rgb(64, 57, 164),rgb(176, 114, 47)) ;
}

.save-changes-btn{
  
    color:rgb(2, 2, 2);
    font-weight:bold;
    font-size:1vw;
    cursor:pointer;
    border-radius: 1vw;
    background:linear-gradient(rgb(64, 57, 164),rgb(176, 114, 47)) ;
}


/*Main Content Section Ends*/

/*Footer Section*/
.footer{
    background-color: rgb(83, 46, 78);
    grid-area:footer;
    
}

.footer-text{
    font-size:1.09vw;
}

.contact-badge{
    
    
}